<template>
    <div id="pushSearch">
      <div class="select-group">
        <div class="items" style="width: 100px;min-width: 100px;">
          <el-select v-model="type" placeholder="请选择">
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="items">
          <el-input v-model="query.value"  placeholder="多条用#分隔"></el-input>
        </div>
        <div class="items">
          <el-button :disabled="listLoading" @click="getList" size="medium" type="success" class="el-icon-search searchBtn">
            <span style="padding-left:5px;">数据反查</span>
          </el-button>
        </div>
      </div>

      <el-table empty-text="暂无任何数据信息" :data="list" v-loading.body="listLoading" border fit style="width: 100%">
        <el-table-column align="center" label="数据ID">
          <template slot-scope="scope">
            <span>{{scope.row.customerName}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="电话">
          <template slot-scope="scope">
            <span>{{ !!scope.row.phone ? scope.row.phone : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="微信">
          <template slot-scope="scope">
            <span>{{ !!scope.row.weChat ? scope.row.weChat : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="关键词">
          <template slot-scope="scope">
            <p v-for="(item,idx) in scope.row.word">
              {{item}}
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="系统标签">
          <template slot-scope="scope">
            <p v-for="(item,idx) in scope.row.label">
              {{item}}
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="客服标签">
          <template slot-scope="scope">
            <p v-for="(item,idx) in scope.row.userLabel.split('$')">
              {{item}}
            </p>
          </template>
        </el-table-column>
        <el-table-column align="center" label="意向项目">
          <template slot-scope="scope">
            <span>{{ !!scope.row.item ? scope.row.item : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="医院">
          <template slot-scope="scope">
            <span>{{ !!scope.row.hospital ? scope.row.hospital : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="号码归属地">
          <template slot-scope="scope">
            <span>{{ scope.row.provinceName + ( scope.row.cityName === '' ? '' :  '/' + scope.row.cityName ) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="客服">
          <template slot-scope="scope">
            <span>{{ !!scope.row.userName ? scope.row.userName : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="转化时间">
          <template slot-scope="scope">
            <span>{{ !!scope.row.callTime ? scope.row.callTime.split('.')[0] : '-' }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="220">
          <template slot-scope="scope">
            <router-link @click.native="saveLocal(scope.row,'AD_FILE')" style="margin-right: 9px;" :to="{path:'/datapush/detail'}">
              <el-button type="primary" size="small" icon="el-icon-document">详情</el-button>
            </router-link>
          </template>
        </el-table-column>
      </el-table>
      <div v-show="!listLoading" class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" prev-text="上一页" next-text="下一页" @current-change="handleCurrentChange" :current-page.sync="query.current"
                       :page-sizes="[10,20,30,50]" :page-size="query.pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<script>
    import { getSearch } from '@/api/datapush';
    import {filterObj} from "@/utils/index";
    import { mapGetters } from 'vuex';

    export default {
        name: "push-search",
      data(){
          return {
            listLoading:false,
            total:0,
            list:[],
            type:2,
            keyMap:['customerId','phone','wechat'],
            typeList:[
              {id:1,name:'数据ID'},
              {id:2,name:'手机号'},
              {id:3,name:'微信号'}
            ],
            query:{
              current:1,
              pagesize:10,
              value:'',
              companyId:'',
              userId:''
            }
          }
      },
      created(){
        this.query.companyId = this.userInfo.companyId;
        this.query.userId = this.userInfo.userId;
      },
      computed:{
        ...mapGetters([
          'userInfo'
        ])
      },
      methods:{
        getList(){
          let temp = Object.assign({},this.filterObj(this.query,['value'],true));
          temp[this.keyMap[this.type - 1]] = this.query.value;
          getSearch(temp).then(res=>{
            this.list = res.data.info;
            this.total = res.data.total;
          }).catch(res=>{
            this.$message.error(res);
          })
        },
        saveLocal(item){
          let local_user = localStorage.getItem('PUSH_DATA');
          !!local_user ? localStorage.removeItem('PUSH_DATA') : null;
          localStorage.setItem('PUSH_DATA',JSON.stringify(item))
        },
        handleSizeChange(val) {
          this.query.pagesize = val;
          this.getList();
        },
        handleCurrentChange(val){
          this.query.current = val;
          this.getList();
        },
        filterObj
      }
    }
</script>

<style rel="text/scss" lang="scss" scoped>
    #pushSearch{
      .searchBtn {
        margin-left: 50px;
      }
      .select-group {
        margin: 50px 0px 30px 100px;
      }
    }
</style>
